<template>
    <div class="page_content">
        <div class="data-content">
            <div class="w-fixed-center">
                <div class="video-list">
                    <div v-for="item in apiData" :key="item.id" class="video">
                        <router-link :to="{ name: 'web_video_detail', params: { id: item.id } }">
                            <img class="img" :src="imgDomainUrl + item.img" alt="">
                            <p class="name ccyc2 mobile">{{ item.title }}</p>
                            <p class="price ccyc1">
                                <span class="date">{{ item.add_date }}</span>
                                <span class="times"><img src="@/assets/img/web/video_times.png" alt="">{{
                                    item.play_times_sum }}</span>
                            </p>
                            <p class="name ccyc2 pc">{{ item.title }}</p>
                            <p class="desc mobile">{{ item.desc }}</p>
                        </router-link>
                    </div>
                </div>

                <!-- 加载中 -->
                <div class="loading_more_div"
                    style="width: 100%; display: flex; justify-content: center;flex-direction: column;align-items: center;color:#999;">
                    <div><a-spin size="large" :spinning="isLoading"></a-spin></div>
                    <div>{{ isLoading ? '加载中……' : '' }}</div>
                    <div>{{ isLastPage ? '没有更多数据了' : '' }}</div>
                </div>

                <!-- 分页 -->
                <div class="pc">
                    <a-pagination v-model:current="currentPage" v-model:page-size="pageSize" :hideOnSinglePage=true
                        :showSizeChanger=false :total="dataTotle" :show-total="(total, range) => `共 ${total} 条`"
                        v-show="dataTotle > 0 && !isLastPage" />
                </div>
            </div>
        </div>
        
        <!-- 滚动到顶部，右侧固定按钮 -->
        <scrollToTop></scrollToTop>

    </div>
</template>

<script setup>
import { message } from 'ant-design-vue';
import { ref, watch, onMounted, inject } from 'vue';   //引入ref
import { getVideoList } from "@/api/web";   //引入api
import scrollToTop from '@/components/web/page/scroll_to_top.vue';   //引入滚动到顶部的组件
//设置导航选中状态
import { webNavSelected } from '@/store/webNavSelected.js';
webNavSelected.set('video_scroll');

// 引入滚动加载更多
import { useScroll } from '@/store/scroll.js';
const { scrollIsBottom, scrollTop, scrollHeight, clientHeight } = useScroll();

const isLoading = ref(true);    // 控制loading

const { imgDomainUrl } = inject('imgDomainUrl');  // 依赖注入--文件、图片前的域名

const isLastPage = ref(false);   //是否显示没有更多数据
const pageTotal = ref(1);   //共多少页数据
const pageSize = ref(10);   //每页多少条
const currentPage = ref(1); //当前第几页
const dataTotle = ref(0); //共多少条数据
const apiData = ref([]); // 接口获取到的数据

// 获取数据
const getData = () => {
    isLoading.value = true;
    const searchData = ref({ page: currentPage.value, limit: pageSize.value });
    //根据需求可以通过data传入参数
    getVideoList(searchData.value).then((res) => {
        isLoading.value = false;
        if (res === false) return;

        dataTotle.value = res.data.total;
        pageTotal.value = res.data.last_page;
        apiData.value.push(...res.data.data);
        isLastPage.value = pageTotal.value == currentPage.value;
    }).catch((rej) => {
        isLoading.value = false;
        message.error('错误：' + rej);
    });
}

// 进入页面执行一次
onMounted(() => {
    getData();
});

// 当变量值改变时触发
watch([scrollIsBottom, currentPage], async ([newscrollIsBottom, newcurrentPage], [oldscrollIsBottom, oldcurrentPage]) => {
    // 当页面滚动到底部并且当前不是在加载中并且当前页小于等于总页数时，加载下一页数据
    if (newscrollIsBottom && !isLoading.value && !isLastPage.value && newcurrentPage <= pageTotal.value) {
        if (oldcurrentPage == newcurrentPage && newcurrentPage + 1 <= pageTotal.value) {
            currentPage.value = newcurrentPage + 1;
        }
        getData();
    }
});

</script>

<style scoped>
.page_content {
    background-color: #f2f2f2;
}

.data-content {
    padding: 20rem 0;
}

.video-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.video {
    width: 19.2%;
    margin-bottom: 20rem;
    border: 1rem solid #ccc;
    border-radius: 5rem;
    padding: 10rem;
    margin-right: 1%;
}

.video:nth-child(5n) {
    margin-right: 0;
}

.video .img {
    width: 100%;
    height: 200rem;
    object-fit: cover;
}

.video .price {
    margin-top: 5rem;
    font-size: 14rem;
    margin-bottom: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666;
    height: 24rem;
    line-height: 24rem;
}

.video .price .times {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.video .price .times img {
    width: 14rem;
    height: 14rem;
    margin-right: 3rem;
}

.video .name {
    font-size: 16rem;
    margin-bottom: 5rem;
    color: #333;
}

:deep(.ant-pagination) {
    display: flex;
    justify-content: flex-end;
}

:deep(.ant-pagination-item, .ant-pagination-jump-next, .ant-pagination-jump-prev) {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*手机端样式*/
@media screen and (max-width: 800px) {
    .w-fixed-center {
        width: 348rem;
    }

    .video-list {
        justify-content: space-between;
    }

    .video {
        width: 100%;
        margin-right: 0;
        margin-bottom: 15rem;
        padding: 0;
        overflow: hidden;
        background-color: #ffffff;
    }

    .video .img {
        height: 200rem;
    }

    .video .name {
        margin-top: 10rem;
        height: 22rem;
        line-height: 22rem;
        font-size: 16rem;
        padding: 0 10rem;
    }

    .video .price {
        margin-top: 5rem;
        height: 14rem;
        line-height: 14rem;
        font-size: 10rem;
        justify-content: flex-start;
        padding: 0 10rem;
    }

    .video .price .times {
        margin-left: 20rem;
    }

    .video .desc {
        margin-top: 10rem;
        padding: 0 10rem;
        font-weight: 400;
        font-size: 12rem;
        color: #444444;
        line-height: 18rem;
    }

    :deep(.ant-pagination) {
        justify-content: space-between;
    }

    :deep(.ant-pagination-total-text) {
        display: none;
    }
}
</style>
